{% extends "base.html" %}
{% load i18n %}
{% block head-css-ext %}
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/layout.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery-ui.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/ui.datepicker.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery.autocomplete.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/forms.css" media="screen" />
{% endblock %}

{% block head-js-ext %}
  <!-- jQuery -->
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery-ui.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.ui.datepicker-es.js"></script>
  <!--[if IE]><script type="text/javascript" src="{{MEDIA_URL}}js/jquery.bgiframe.js"></script><![endif]-->
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.autocomplete.js"></script>
{% endblock %}

{% block head-js-embedded %}
  <script type="text/javascript" charset="utf-8">

    $(document).ready(function(){
      
      var year = new Date().getFullYear();
      
      $("#datepicker").datepicker({
        firstDay: 0,
        dateFormat: 'yy-mm-dd',
        yearRange: '1900' + ':' + year, 
        changeMonth: true,
        changeYear: true,
        showOn: 'button',
        buttonImage: '{{MEDIA_URL}}img/calendar.gif',
        buttonImageOnly: true,
        showButtonPanel: true,
        maxDate : new Date()
      });
    
      $('#productos').autocomplete("{% url buscarproducto %}", {
        multiple: true,
        dataType: 'json',                    
        width: 300, 
        parse: function(data){
          return $.map (data, function(row) {
            return {
              data: row,                                      
              result: row[0]
            }
           });
        }
      }).result(function(event, data, formatted) {
        $('#productos').val(data[0]);
      });
    });     
    function finalizar()
    {
        location.href = "{% url inventario %}" 
    }
  </script>
{% endblock %}

{% block content-box1 %}
<form method="post" action=".">{% csrf_token %}
  <table>   
    <tr>
      <td><label for="productos">Producto :</label>{% if form.producto.errors %} <div class="error">{{ form.producto.errors|join:", " }}</div>{% endif %}</td>
      <td>{{ form.producto }}</td>
    </tr>
    <tr>
      <td><label for="id_cantidad">Cantidad :</label>{% if form.cantidad.errors %} <div class="error">{{ form.cantidad.errors|join:", " }}</div>{% endif %}</td>
      <td>{{ form.cantidad }}</td>
    </tr>
    <tr>
      <td><label for="id_fecha">Fecha Ingreso:</label>{% if form.fecha.errors %} <div class="error">{{ form.fecha.errors|join:", " }}</div>{% endif %}</td>
      <td>{{ form.fecha }}</td>
    </tr>     
  </table>
  <br>
  <div align="center">
    <input type="submit" value="Agregar y Continuar" />
  </div>
</form>
<button onclick="finalizar()">Finalizar</button>
{% endblock %}